"use client";
import { useState, useEffect } from "react";

export default function UserProfileLoader() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 模拟 API 请求
    async function fetchUser() {
      try {
        console.log("开始请求 API...");
        await new Promise((resolve) => setTimeout(resolve, 2000));
        const mockResponse = {
          id: 101,
          username: "JavaMaster",
          email: "master@java.com",
          role: "ADMIN",
        };

        setUser(mockResponse);
        setIsLoading;
      } catch (error) {
        console.error("API 请求失败:", error);
        setIsLoading(false);
      }
    }

    fetchUser();
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div style={{ padding: "50px", fontFamily: "sans-serif" }}>
      <h1>用户档案 (API 数据)</h1>
      <div
        style={{
          border: "1px solid #ccc",
          padding: "20px",
          borderRadius: "10px",
          boxShadow: "0 4px 8px rgba(0,0,0,0.1)",
        }}
      >
        <p>
          <strong>ID:</strong> {user.id}
        </p>
        <p>
          <strong>用户名:</strong> {user.username}
        </p>
        <p>
          <strong>邮箱:</strong> {user.email}
        </p>
        <p>
          <strong>角色:</strong>{" "}
          <span style={{ color: "blue" }}>{user.role}</span>
        </p>
      </div>
    </div>
  );
}
